<template>
<div>
    <van-nav-bar title="举报" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <van-image class="imgs" width="350" height="250" src="bimg/ttk.png" />
    <van-form @submit="onSubmit">
        <van-field
        v-model="youxiangs"
        center clearable 
        name="youxiangs"
        label="邮箱"
        placeholder="请填写邮箱"
        :rules="[{required:true},
        {   message: '请输入正确邮箱',
            pattern:/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
          }]"
      />
      <van-field
        v-model="password"
         center clearable 
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{required:true},
          { message: '请输入正确密码，密码至少包含 数字和英文，长度6-20',
            pattern:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
          }]"
      />
       <!-- <div v-if="show" style="color:red; margin-right:.3rem; text-align: center;">
        <span>
        请输入正确邮箱验证码
        </span>
      </div> -->
      <div style="margin: 16px;">
       <van-button round block type="info" native-type="submit" :disabled='shows'>举报</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>


export default {
  data() {
    return {
      username: "",
      password: "",
      passwords: "",
      img: "bimg/ttk.png",
      pattern: /[a-zA-Z0-9]{6,15}$/,
      sms:'',
      show:false,
      shows:false,
      youxiangs:'',
      showw: true,
      count: '',
      timer: null,
      user:[],
      // pattern: /\w{5,17}$/,
    };
  },
  methods: {
    onSubmit(values) {
    console.log("submit", values);
      this.$axios.post("/api/toemail", values).then((data) => {
        console.log(data);
        if (data.data.code == 400) {
          this.$dialog
          .confirm({
            message: "没有该账号请去注册",
            confirmButtonColor: "red",
          })
          .then(() => {
            this.$router.push("/zhuce");
          })
          .catch(() => {
            console.log("点击了取消");
          });
        } else {
          this.$dialog
          .confirm({
            message: "举报成功，谢谢您对本书单的检举，我们将仔细核查！",
            confirmButtonColor: "red",
          })
          .then(() => {
            console.log("点击了确认");
          })
          .catch(() => {
            console.log("点击了取消");
          });
        }
      });
    },
    onClickLeft() {
      this.$router.push("/report");
    },
    denglv(){
       this.$router.push("/denglv");
    },
    // 发送邮箱验证码
    sendsms(){
       const TIME = 60;
       this.count = TIME;
       this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME) {
         this.count--;
        } else {
         clearInterval(this.timer);
          this.patterns = '1';
          console.log(this.patterns)
        }
       }, 10000)

      console.log(this.sms)
      this.$axios.get('/api/sms',{
        params:{'youxiangs':this.youxiangs}
      }).then(data=>{
       this.patterns = data.data.sms
       var sd = data.data.sms
       console.log(data)
       console.log(sd)
      })
    },
    blur(){
      if(this.sms.length==0){
        this.show = false
      }else{
        if(this.sms !==this.patterns){
        this.show = true
        this.shows = true
     }
      else{
        this.show = false
        this.shows = false
     }
    }
     
    },
    validator(val) {
      if( this.sms == this.patterns){
        return /[0-9_]{4,15}$/.test(val);
      }else{
        return /0/.test(val);
      }
    },
 
  },
     mounted() {
        this.youxiangs = localStorage.getItem("email");
        // console.log(JSON.parse(localStorage.getItem("email")))
    },
};
</script>

<style  scoped>
.van-cell{
  line-height: 16px;
  height: 56px;
}
/* .van-cell>>>input{
  margin-top: .2rem;
}
.van-cell>>>.van-cell__title{
 line-height: 1rem;
} */
.email{
  padding: 5px 16px;
}
.bottom {
  width: 100%;
  display :flex;
  justify-content:space-around;
  position :absolute;
  bottom:.6rem;
}
.Sign {
  color: blue;
}
</style>